<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas 基础｛绘制无差动画｝</title>
<style type="text/css">
#canvas{border: 1px solid #ccc;}
</style>
</head>
<body>
   <canvas id="canvas" width="600" height="400">
      <p>Your browserdoes not support the canvas element.</p>  
   </canvas>
</body>
<script type="text/javascript">
// 在Canvas画布中绘制图形，一般情况下后绘制的会覆盖先绘制的，所以在绘制图像的时候需要先绘制远景b0，再绘制中景b1，最后绘制近景b2。

var FPS =2;//每秒绘制的图片数,数字越大，时间越慢
var SECONDS_BETWEEN_FRAMES = 1 / FPS;//时间，间隔时间，速度

var bg0 = new Image();

var x = 0;//移动的距离{距离*速度}
var distance=0
var width=600,height=400;//宽高

var canvas;
var context2D;

window.onload = init;

// 入口文件
function init(){
   bg0.src = "b0.png";

   canvas =document.getElementById("canvas");
   context2D =canvas.getContext("2d");

   // 表示1S绘制24次
   var a=setInterval(animation,1/24);
}

// 动画
function animation(){
   // clearRect() 方法清空给定矩形内的指定像素。
   context2D.clearRect(0,0,600,400);

   if(distance>=width){
      x=0
   }
   // console.log(distance)
   distance = ++x;//绘制的距离，速度*时间

   // 重新绘制
   draw(bg0,distance-width,0);
   // draw(bg0,distance,0);
}

/**
 * canvas 绘制
 * img 需要绘制的图片
 * dx 在画布上放置图像的 x 坐标位置。
 * dy 在画布上放置图像的 y 坐标位置。
 */
function draw(img,dx,dy){
   // drawImage API --- http://www.w3school.com.cn/tags/canvas_drawimage.asp
   context2D.drawImage(img,dx+x,dy);
}
</script>
</html>